<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>聊天室客户端</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script src='main.js'></script>
</head>

<body>
    <h1>聊天室</h1>
    <!-- 补全 border 属性值 -->
    <div 
        id="content" 
        name="name" 
        style="overflow-y: scroll;width: 400px;height: 300px;border: 1px solid #ccc;"  <!-- 添加边框样式 -->
    ></div>
    <br />
    <div>
        <input type="text" id="msg" style="width: 200px;">
        <button id="submit">提交</button>
        <script src="WSClient.js" charset="utf-8"></script>
    </div>
    <script>
        // 补全 WebSocket 基本连接逻辑（原生语法）
        const ws = new WebSocket('ws://localhost:8080'); // 假设服务器地址
        const content = document.getElementById('content');
        const msgInput = document.getElementById('msg');

        // 连接建立时的处理
        ws.onopen = function() {
            console.log('已连接到 WebSocket 服务器');
        };

        // 接收消息时的处理（示例：显示消息到页面）
        ws.onmessage = function(event) {
            content.innerHTML += `<div>${event.data}</div>`;
            content.scrollTop = content.scrollHeight; // 自动滚动到底部
        };

        // 提交按钮点击事件（补全 DOM 元素获取）
        document.querySelector('#submit').addEventListener('click', function() {
            const message = msgInput.value.trim(); // 增加输入值校验
            if (message) {
                let message=msg.value;
                ws.send(message); // 发送消息到服务器
                msgInput.value = ''; // 清空输入框
            }
        }, false);
    </script>
</body>

</html>